<template>
  <div>
    <el-row type="flex" justify="space-between" class="button-box">
      <el-col :span="6" class="left">
        <el-input placeholder="输入 用户名/姓名 查询" class="search-input" v-model="params.search">
          <el-button slot="append" @click="searchUser">搜索</el-button>
        </el-input>
      </el-col>
      <el-col :span="18" class="right">
        <el-button type="primary" @click="addUser">新增用户</el-button>
      </el-col>
    </el-row>
    <user-table :listLoading="listLoading" :tableColumn="tableColumn" :tableData="tableData" :currentPage="currentPage" :total="total" @actionClick="actionClick" :buttonGroup="buttonGroup" :pageSize="pageSize" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
      <template slot="gender" slot-scope="scope">
        <span>{{ scope.row.gender | genderFilter }}</span>
      </template>
      <template slot="status" slot-scope="scope">
        <span>{{ scope.row.status | statusFilter }}</span>
      </template>
    </user-table>

    <user-template :title="userFormTitle" :form="userForm" :dialogVisible.sync="dialogVisible" @submitForm="submitForm" :disabled="disabled" :checkRoleArr="checkRoleArr" :roleArr="roleArr"></user-template>

    <role-template :form="roleForm" :title="'修改角色'" :dialogVisible.sync="roleDialogVisible" @submitForm="submitRoleForm" :checkRoleArr="checkRoleArr" :roleArr="roleArr"></role-template>

    <password-template :form="pwdForm" :title="'重置密码'" :dialogVisible.sync="pwdDialogVisible" @submitForm="submitPwdForm"></password-template>
  </div>
</template>

<script>
  import utilMixin from '@views/mixin/systemUtil'
  import UserTable from '@components/Table'
  import UserTemplate from '@views/system/components/UserTemplate'
  import RoleTemplate from '@views/system/components/RoleTemplate'
  import PasswordTemplate from '@views/system/components/PasswordTemplate'
  import { getUserList, addUser, getUserRole, updateUser, deleteUser, updateUserRole, getUserDetail, getRoleList } from '@api/system'
  import { Vue, Component, Watch } from 'vue-property-decorator'

  @Component({
    components: {
      UserTable,
      UserTemplate,
      RoleTemplate,
      PasswordTemplate
    },
    mixins: [utilMixin]
  })
  export default class SystemUser extends Vue {
    data() {
      return {
        dialogVisible: false, //form表单是否显示
        userForm: {}, //form表单提交对象
        userFormTitle: "新增用户", //表单title
        disabled: false, //表单元素是否可编辑
        submitIndex: 0, //表单确定按钮回调索引 0新增 1编辑
        roleDialogVisible: false, //修改角色表单是否显示
        roleForm: {}, //修改角色form表单提交对象
        roleArr: [], //角色数组
        checkRoleArr: [], //勾选中的角色数组
        pwdDialogVisible: false, //修改密码表单是否显示
        pwdForm: {}, //修改密码form表单提交对象
        tableColumn: [ //表格列对象
          { type: "name", name: "用户名", operate: false },
          { type: "truename", name: "真实姓名", operate: false },
          { type: "gender", name: "性别", operate: true },
          { type: "phone", name: "手机号码", operate: false },
          { type: "status", name: "状态", operate: true }
        ],
        tableData: [], //表格数据
        currentPage: 1, //当前页码
        buttonGroup: [{ name: '编辑' }, { name: '角色' }, { name: '重置密码' }, { name: '删除' }] //表格按钮数组
      }
    }
    mounted() {
      this.params.offset = this.startOffsetNum;
      this.params.limit = this.pageSize;

      this.$nextTick(function() {
        this.fetchData();
        this.initRoleInfo();
      })
    }
    @Watch('pageSize')
    pageSizeChange(val) { //监听一页数量
      this.params.limit = val;
      this.fetchData();
    }
    @Watch('pageIndex')
    pageIndexChange(val) { //监听页码索引
      this.currentPage = val - 0 + 1;
      this.params.offset = this.startOffsetNum;
      this.fetchData();
    }
    fetchData() { //初始化表格数据
      this.listLoading = true;
      getUserList(this.params).then(response => {
        let res = response.data;
        if (res.status) {
          this.tableData = res.data.rows;
          this.total = res.data.total;
          this.listLoading = false;
        } else {
          this.showMessage(res.message, 'error');
        }
      })
    }
    initRoleInfo() {
      let params = { offset: this.startOffsetNum, limit: -1};
      getRoleList(params).then(response => {
        let res = response.data.data
        this.roleArr = res.rows
      })
    }
    actionClick(rowData, index) { //表单按钮组回调方法
      //1编辑 2角色 3密码
      switch (index) {
        case 1:
          this.editClick(rowData);
          break;
        case 2:
          this.roleClick(rowData);
          break;
        case 3:
          this.passwordClick(rowData);
          break;
        case 4:
          this.deleteClick(rowData);
          break;
      }
    }
    addUser() { //新增用户
      this.commonEdit({}, 0);
      this.userForm = {};
      this.$set(this.userForm, "roleId", []);
      this.dialogVisible = true;
    }
    editClick(rowData) { //编辑
      getUserDetail(rowData.id).then(response => {
        let res = response.data;
        if (res.status) {
          getUserRole(rowData.id).then(response => {
            if (response.data.status) {
              this.checkRoleArr = response.data.data;
              this.commonEdit(res.data, 1);
              this.userForm = Object.assign({}, res.data);
              this.$set(this.userForm, "roleId", this.checkRoleArr);
              this.dialogVisible = true;
            } else {
              this.showMessage(response.data.message, 'error');
            }
          })
        } else {
          this.showMessage(res.message, 'error');
        }
      })
    }
    commonEdit(rowData, index) { //弹出表单共用方法
      this.submitIndex = index;
      this.userFormTitle = index === 0 ? "新增用户" : "编辑用户";
      this.disabled = index === 1 ? true : false;
    }
    submitForm(userForm) { //表单提交方法
      this.listLoading = true;
      if (this.submitIndex === 0) {
        addUser(userForm).then(response => {
          this.commonSubmitRes(response.data, this.submitIndex, "dialogVisible");
        }, error => {
          this.listLoading = false;
        })
      } else {
        delete userForm.crtime;
        updateUser(userForm).then(response => {
          this.commonSubmitRes(response.data, this.submitIndex, "dialogVisible");
        }, error => {
          this.listLoading = false;
        })
      }
    }
    commonSubmitRes(response, index, dialogVisible) { //提示回调方法
      if (response.status) {
        let message = "";
        switch (index) {
          case 0:
            message = "新增用户成功";
            break;
          case 1:
            message = "编辑用户成功";
            break;
          case 2:
            message = "编辑角户成功";
            break;
          case 3:
            message = "重置密码成功";
            break;
          case 4:
            message = "删除用户成功";
            break;
        }
        this.showMessage(message, 'success');
        this[dialogVisible] = false;
        this.pageIndex = 0;
        this.fetchData();
      } else {
        this.showMessage(response.message, 'error');
      }
      this.listLoading = false;
    }
    roleClick(rowData) { //编辑角色
      this.submitIndex = 2;
      getUserRole(rowData.id).then(response => {
        let res = response.data;
        if (res.status) {
          this.checkRoleArr = res.data;
          this.roleForm = Object.assign({}, rowData);
          this.$set(this.roleForm, "roleId", this.checkRoleArr);
          this.roleDialogVisible = true;
        } else {
          this.showMessage(res.message, 'error');
        }
      })
    }
    passwordClick(rowData) { //修改密码
      this.pwdForm = {id: rowData.id};
      this.submitIndex = 3;
      this.pwdDialogVisible = true;
    }
    submitRoleForm(roleForm) { //角色表单提交方法
      delete roleForm.crtime;
      delete roleForm.password;
      updateUserRole(roleForm).then(response => {
        this.commonSubmitRes(response.data, this.submitIndex, "roleDialogVisible");
      }, error => {
        this.listLoading = false;
      })
    }
    submitPwdForm(pwdForm) { //密码表单提交方法
      if (!pwdForm.password || pwdForm.password.trim() == "") {
        pwdForm.password = "123456";
      }
      updateUser(pwdForm).then(response => {
        this.commonSubmitRes(response.data, this.submitIndex, "pwdDialogVisible");
      }, error => {
        this.listLoading = false;
      })
    }
    searchUser() { //搜索用户
      this.pageIndex = 0;
      this.fetchData();
    }
    deleteClick(rowData) { //删除方法
      this.$msgbox.confirm('确定要删除用户：' + rowData.name + ' 吗？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser(rowData.id).then(response => {
          this.commonSubmitRes(response.data, 4, "dialogVisible");
        })
      })
    }
  }
</script>

<style lang="scss">
  .role-checkbox-group {
    .el-checkbox+.el-checkbox {
      margin-left: 0px;
    }
    .el-checkbox {
      margin-right: 30px;
    }
  }
</style>
